<!DOCTYPE html>
<html>

<head>
    <title>飞天猪</title>
    <link href='/favicon.ico' rel='shortcut icon'>
    <link rel='stylesheet' type='text/css' href='/css/index.css' />
    <script src='/js/socket.io.js' crossorigin="anonymous"></script>

    <link href="/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" type='text/css'>
    <script src="/jquery/3.3.1/jquery.js"></script>
    <script src="/bootstrap-3.3.7-dist/js/bootstrap.min.js" crossorigin="anonymous"></script>

</head>

<body>

<a id='back'  href="/user/"><span id="backsend" style="visibility:visible">＜返回</span></a>
    <br>
    飞天猪 - 保卫世界和平
    <div class='page-top'>
        时间：<span id='times'></span><br>
        <button id='send'>开&nbsp;&nbsp;&nbsp;&nbsp;始</button>
        <br>
        <b>服务器响应的消息：</b>
    </div>

    <div class="page-top-bottom"></div>
    <div class='ask-panels'>
        <div class='serverDivMsg'>
            <span id='msg'></span>
            <div id="msg_end" style="height:0px; overflow:hidden"></div>
        </div>
    </div>
    <script>
        var socket = io('http://localhost:9999');
        var send = document.querySelector('#send');
        var msg = document.querySelector('#msg');
        var msg_end = document.querySelector('#msg_end');

        var backsend = document.querySelector('#backsend');
        

        socket.on('outputmsg', data => {
            if (data == '0000' || data == '9999') {
                send.removeAttribute("disabled");
                backsend.style.visibility = 'visible';
            } else {
                // 及时插入
                msg.innerHTML = `${msg.innerHTML}${data} <br/>`;
                // 自动滚动到底部：创建一个隐藏元素来将其滚末尾
                msg_end.scrollIntoView();
            }
        })

        send.onclick = () => {
            // 点击开始
            msg.innerHTML = '';
            send.setAttribute('disabled', true);

            backsend.style.visibility = 'hidden';
            // 激活后台 通信
            socket.emit('send', 55939);
        }


        //得到时间并写入div
        function getDate() {
            var date = new Date();
            Date.prototype.toMyDateString = function () { return this.getFullYear() + '-' + (this.getMonth() + 1) + '-' + this.getDate() + ' ' + this.getHours() + ':' + this.getMinutes() + ':' + this.getSeconds(); };
            var div1 = document.getElementById('times');
            div1.innerHTML = date.toMyDateString();
        }
        //使用定时器每秒向div写入当前时间
        setInterval('getDate()', 1000);
    </script>
</body>

</html>